<%--
  Created by IntelliJ IDEA.
  User: asus
  Date: 2020/11/10
  Time: 23:15
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<head>
    <link rel="StyleSheet" href="css/jpetstore.css" type="text/css"
          media="screen" />
    <link rel="stylesheet" href="css/jquery-ui.css" />

    <meta name="generator"
          content="HTML Tidy for Linux/x86 (vers 1st November 2002), see www.w3.org" />
    <title>MyPetStore</title>
    <meta content="text/html; charset=windows-1252"
          http-equiv="Content-Type" />
    <meta http-equiv="Cache-Control" content="max-age=0" />
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta http-equiv="expires" content="0" />
    <meta http-equiv="Expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
    <meta http-equiv="Pragma" content="no-cache" />
    <script src="js/jquery-3.5.1.min.js"></script>
    <script src="js/jquery-ui.js"></script>

<%--    <script src="js/Search.js"></script>--%>
    <script>
        $(function () {
            var keyword = document.getElementById('SearchInput').value;
            console.log("hellow");
            $.ajax({
                type: "GET",
                url: "SearchHelp",
                data: {keyword: keyword},


                success: function (data) {
                    var res = data.split(",");
                    console.log(data);
                    console.log(res);
                    $("#SearchInput").autocomplete({
                        source: res
                    });

                }

            })
        });
    </script>
</head>

<body>

<div id="Header">

    <div id="Logo">
        <div id="LogoContent">
            <a href="main"><img src="images/logo-topbar.gif" /></a>
        </div>
    </div>

    <div id="Menu">
        <div id="MenuContent">
            <a href="viewCart">
                <img align="middle" name="img_cart" src="images/cart.gif" />
            </a>
            <img align="middle" src="images/separator.gif" />
            <c:if test="${sessionScope.account==null}"><a href="SignonForm">Sign In</a></c:if>
            <c:if test="${sessionScope.account!=null}">
                <a href="Signout">Sign Out</a>
                <img align="middle" src="images/separator.gif" />
                <a href="EditAccountForm">My Account</a>
            </c:if>


            <img align="middle" src="images/separator.gif" />
            <a href="help.html">?</a>

        </div>
    </div>

    <div >
        <div >
            <form id="Search" action="search" method="post">
                <input type="text" name="keyword" size="14" id="SearchInput" autocomplete="off"/>
                <input type="submit" name="searchProducts" value="Search" />

<%--                <div id="SearchHelp" >--%>
<%--                </div>--%>
            </form>

        </div>

    </div>

</div>

    <div id="QuickLinks">
        <a href="ViewCategory?categoryId=FISH"><img
                src="images/sm_fish.gif" /></a> <img src="images/separator.gif" />
        <a href="ViewCategory?categoryId=DOGS"><img
                src="images/sm_dogs.gif" /></a> <img src="images/separator.gif" />
        <a href="ViewCategory?categoryId=REPTILES"><img
                src="images/sm_reptiles.gif" /></a> <img
            src="images/separator.gif" />
        <a href="ViewCategory?categoryId=CATS"><img
            src="images/sm_cats.gif" /></a> <img src="images/separator.gif" />
        <a href="ViewCategory?categoryId=BIRDS"><img
                src="images/sm_birds.gif" /></a>
    </div>

</div>

<div id="Content">